import { Button, Checkbox, Form, Input, Modal } from 'antd';
import { useState } from 'react';

const Index = () => {
  // form表示表单实例
  // 可以绑定给Form组件
  // 多数就是在提交按钮没有在表单里面的时候用
  const [form] = Form.useForm();
  // const [, forceUpdate] = useState({});

  const [isModalOpen, setIsModalOpen] = useState(false);
  // const [obj, setObj] = useState({ username: 'zhangsan', password: '123' });

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    // setIsModalOpen(false);
    // getFieldsValue获取所有字段
    // console.log(form.getFieldsValue());
    // console.log(form.getFieldValue('username'));

    // isFieldsTouched表示表单控件是否被用户操作过
    // console.log(form.isFieldsTouched(true));

    // resetFields清空所有表单控件的内容
    // form.resetFields();

    // setObj({ username: 'lisi', password: '456' });
    // form.setFieldsValue({ username: 'lisi', password: '456' });

    form
      .validateFields()
      .then((res) => {
        console.log(res);
      })
      .catch((errorInfo) => {
        // console.log(errorInfo);
      });
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        打开
      </Button>

      <Modal
        title="Basic Modal"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          autoComplete="off"
          // initialValues={{ username: 'zhangsan', password: '123' }}
          form={form}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export default Index;
